<template>
  <div>
	<!-- 1.0  利用mint-ui的header组件实现整个系统头部 -->
	
	<mt-header fixed title="这是一个小呆萌"></mt-header>	
	<!-- 统一的返回按钮 -->
	<div id="back" v-if="isshow">
		<a href="javascript:void(0)" @click="backto">返回</a>
	</div>
	<!-- 2.0  利用vue-router的router-view进行占位 -->

	<router-view></router-view>

	<!-- 3.0 利用mui中的tabbar组件实现系统的底部   -->

	<nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item " to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-chat">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item" to="/shopcar/car">
				<span class="mui-icon mui-icon-contact"><span class="mui-badge"  id="badge">0</span></span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">搜索</span>
			</router-link>
		</nav>
  </div>
  
</template>  

<script>
import {vm,COUNTSTR} from './kits/vm.js';
//利用vm.$on()来注册COUNT这个常量代表的事件
vm.$on(COUNTSTR,function(count){
		var badgeobj =document.getElementById('badge');
		badgeobj.innerText = parseInt(badgeobj.innerText)+ count;
})
export default {
  data(){
    return {
     isshow:false
    }
	},
	watch:{
		'$route':function(newroute,oldroute){
				if(newroute.path.toLowerCase() == '/home'){
					this.isshow = false;
				}else{
					this.isshow = true;
				}
		}
	},
  methods: {
    backto(){
			//利用路由对象中的go(-1)方法实现返回上一级页面
			this.$router.go(-1);

		}
  },
  created() {}
};
</script>

<style scoped>
#back{
	width:60px;
	position:fixed;
	top:10px;
	left:10px;
	z-index:9999;
}
	#back a{
		color:white;
		font-size:16px;
		font-weight:700;
	}
</style>


